<template>
  <div class="toolbar">
    <div class="item" @click="handleCollectClick()">
      <van-icon size="2rem" name="star-o"/>
    </div>
    <div class="item" @click="handleLocationClick()">
      <van-icon size="2rem" name="location-o"/>
    </div>
  </div>
</template>

<script>

  export default {
    name: "Toolbar",
    data() {
      return {
        keywords: '',
        infoWindow: null,
        userPos:  [119.67109414303, 25.978347494],
        driving:null
      }
    },
    methods: {
      initData() {
        this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      },
      handleCollectClick() {
        configJson.marks.map((data, i) => {
          if (data.marker) {
            map.remove(data.marker);
            data.marker = null
          } else {
            var marker = new AMap.Marker({
              icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
              position: [data.lon, data.lat]
            });
            window.handleNavigate = this.handleNavigate;
            marker.content = `<div>${data.name}</div><button onclick="handleNavigate(${i})">导航</button>`;
            marker.on('click', this.markerClick);
            map.add(marker);
            data.marker = marker
          }
        })
      },
      markerClick(e) {
        this.infoWindow.setContent(e.target.content);
        this.infoWindow.open(map, e.target.getPosition());
      },
      handleNavigate(index) {
        var data = configJson.marks[index];
        console.log(data)
        var self = this;
        AMap.plugin('AMap.Driving', () => {
          this.driving = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_TIME,
            map: map,
            panel: 'driver'
          });
          var startLngLat = self.userPos;
          // var startLngLat = [119.67109414303, 25.978347494];
          var endLngLat = [data.lon, data.lat]
          this.driving.search(startLngLat, endLngLat, (status, result) => {
            console.log(result)
            this.$parent.showDriver = true;
          })
        })
      },

      handleLocationClick() {
        var self = this;
        const {plus} = window
        const {map} = window
        if (!map) return false
        if (plus) {
          plus.geolocation.getCurrentPosition(function (p) {
            let lat = p.coords.latitude
            let lon = p.coords.longitude
            var position = new AMap.LngLat(lon, lat);
            map.setCenter(position);
            self.userPos = [lon, lat]
            console.log(lon)
          }, function (e) {
            alert('error', e)
          }, {
            enableHighAccuracy: true,
            provider: 'amap'
          });
        } else if (navigator && navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(data => {
            const {coords: {latitude, longitude}} = data
            var position = new AMap.LngLat(longitude, latitude);
            map.setCenter(position);
            self.userPos = [longitude, latitude]
            console.log(longitude)
          }, () => {
            alert('定位失败！')
          })
        } else {
          alert('不支持定位！')
        }
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>

<style scoped lang="less">

  .toolbar {
    position: absolute;
    left: 1em;
    top: 7em;
    width: 2em;
    background: white;

    .item {
      margin-top: 0.4em;
    }
  }

  .van-search {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.5em;
  }
</style>
